<template>
    <div class="components-container">
        <aside>
            drag-list base on
            <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
        </aside>
        <div class="editor-container">
            <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" ></dnd-list>
        </div>
    </div>
</template>

<script>
    const DndList = httpVueLoader('/vue/components/DndList/index.vue')
    import { fetchList }  from "/vue/api/article.js";
    module.exports = {
        name: 'DndListDemo',
        components: {"dnd-list": DndList },
        data() {
            return {
                list1: [],
                list2: []
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                this.listLoading = true;

                fetchList().then(response => {
                    this.list1 = response.data.items.splice(0, 5)
                    this.list2 = response.data.items
                })
            }
        }
    }
</script>

